<template>
  <router-link class="item"
              :tag=" href==='' ? 'div' : 'a'"
              :to="href"
              :class="{
                'islink': href != '',
                'has-arrow': hasArrow,
                'avatar-left':avatarSrc,
                'thum-right':imgRight
                }">
    <slot name="item-left"></slot>
    <div class="thum "
         v-if="imgSrc"
         :class="{'left':!imgRight , 'right':imgRight }"
        :style="{
          backgroundImage:'url('+ imgSrc +')',
          width: imgWidth +'px',
          height: imgHeight +'px'
        }">
        <div class="video-btn" v-if="isVideo"><i class="icon icon-play"></i></div>
        <slot name="label" class="label"></slot>
    </div>
    <div class="avatar"
         v-if="avatarSrc"
         :class="{'left':!imgRight , 'right':imgRight }"
        :style="{
          backgroundImage:'url('+ avatarSrc +')',
          width: avatarSize + 'px',
          height: avatarSize + 'px'
        }">
        <div class="video-btn" v-if="isVideo"><i class="icon icon-play"></i></div>
        <slot name="label" class="label"></slot>
    </div>

    <div class="icon-left"  v-if="icon">
      <i class="icon" :class="icon"></i>
    </div>
    <div class="item-body">
      <div class="text-top">
        <slot name="title"></slot>
        <div class="title" :class="{'line2': twoLine}">{{title}} <slot name="title-after"></slot></div>
      </div>
      <div class="text-middle" v-if="desc">
        <p>{{desc}}</p>
      </div>
      <slot name="text-middle"></slot>
      <slot name="text-footer" ></slot>
      <div class="text-footer">{{footer}}</div>
    </div>

    <slot class="item-right" name="item-right"></slot>
  </router-link>
</template>

<script>

export default {
  name: 'item',
  props:{
    imgSrc:{
      type: String,
      default : ''
    },
    avatarSrc:{
      type: String,
      default : ''
    },
    title: String,
    label: String,
    desc:  {
      type:String,
      default:''
    },
    twoLine: {
      type:Boolean,
      default: false
    } ,
    icon: String,
    avatarSize:{
      type:String,
      default:'48'
    },
    imgRight:{
      type:Boolean,
      default:false
    },
    isVideo:{
      type:Boolean,
      default:false
    },
    imgWidth: {
      type:String,
      default:'110'
    },
    imgHeight: {
      type:String,
      default:'90'
    },
    href: {
      type:String,
      default:''
    },
    hasArrow:{
      type: Boolean,
      default : false
    },
    size:String,
    footer:String,
  },
  data(){
    return{

    }
  },
  methods:{

  }
}
</script>

<style lang="stylus">
@import 'assets/stylus/base'
.item
  padding: $spacing
  position: relative
  display: flex
  flex-flow: row nowrap
  justify-content: space-between
  align-items: stretch
  background-color: #fff
  transition: all .2s
  + .item
    fine-border(top, $border-light)
    &:before
      left: $spacing
  &.islink
    &:active
      background-color: #eee
  &.thum-right
    flex-direction: row-reverse;
  .thum
    display: block
    overflow: hidden
    border-radius: 3px
    position: relative
    bg-box(100px)
    &.left
      margin-right: 10px
    &.right
      margin-left: 10px
    .label
      position: absolute
      left: 0
      top: 0
      background: rgba(#000,.5)
      color: #fff
      font-size: $font-xs
      line-height: 18px
      padding: 0 5px
  .avatar
    border-radius: 50%
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-right: 10px;
  .icon-left
    width: 48px
    height: 48px
    display: flex
    align-items: center
    text-align: center
    align-self: center
    .icon
      font-size: 32px
      color: $primary
      line-height: 1
  .check-left
    align-self: center
  .item-body
    display: flex
    flex-flow: column nowrap
    flex: 1
    line-height: 1.25
    overflow: hidden
    white-space: normal
    position: relative
    justify-content: space-between;
    .text-top
      display: flex
      justify-content: space-between
      align-items: center
      .title
        flex: 1
      small
        font-size: 12px
        color: #999
    .text-middle
      margin-top: 3px
      color: $text-grey
      line-height: 1.6
      flex: 1
    .title
      ellipsis()
      font-size: 14px
      margin: 0
      color: $text-dark
    p
      width: 100%
      font-size: 12px
      color: $text-light
      margin: 0
      line-height: 20px
      ellipsis-more(2)
    .text-footer
      margin-top: 3px
      display: flex
      align-items: center
      justify-content: space-between
      font-size: $font-sm
      line-height: 1
      color: $text-light
      span + span
        margin-left: 5px

  .item-right
    margin-left: 10px
    align-self: center
  &.avatar-left
    align-items: center;
    padding-top: 12px
    padding-bottom: 12px
    .item-body
      justify-content: center;

</style>
